# HTML <input> type Attribute

HTML <input> tag

## Example

An HTML form with two different input types; text and submit:

<form action="demo_form.asp">
Username: <input type="text" name="usrname"><br>
<input type="submit" value="Submit">
</form>
Try it yourself »

More "Try it Yourself" examples below.

## Definition and Usage

The type attribute specifies the type of <input> element to display.

The default type is: text.

Tip: This is not a required attribute, but we think you should always include it.

## Browser Support

Attribute |  |  |  |  |
--- | --- | --- | --- | --- | ---
type | Yes | Yes | Yes | Yes | Yes

Note: The type attribute works in all major browsers. However, not all the different input types works in all major browsers.

Look below to see browser support for each input type.

## Differences Between HTML 4.01 and HTML5

HTML5 has the following new input types: color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel, and url.

## Syntax

<input type="value">

## Attribute Values

Value | Description
--- | ---
button | Defines a clickable button (mostly used with a JavaScript to activate a script)
checkbox | Defines a checkbox
color | Defines a color picker
date | Defines a date control (year, month and day (no time))
datetime | Defines a date and time control (year, month, day, hour, minute, second, and fraction of a second, based on UTC time zone)
datetime-local | Defines a date and time control (year, month, day, hour, minute, second, and fraction of a second (no time zone)
email | Defines a field for an e-mail address
file | Defines a file-select field and a "Browse..." button (for file uploads)
hidden | Defines a hidden input field
image | Defines an image as the submit button
month | Defines a month and year control (no time zone)
number | Defines a field for entering a number
password | Defines a password field (characters are masked)
radio | Defines a radio button
range | Defines a control for entering a number whose exact value is not important (like a slider control)
reset | Defines a reset button (resets all form values to default values)
search | Defines a text field for entering a search string
submit | Defines a submit button
tel | Defines a field for entering a telephone number
text | Default. Defines a single-line text field (default width is 20 characters)
time | Defines a control for entering a time (no time zone)
url | Defines a field for entering a URL
week | Defines a week and year control (no time zone)

## Examples

### Input type: button

## Example

A clickable button, that activates a JavaScript when it is clicked:

<input type="button" value="Click me" onclick="msg()">
Try it yourself »

### Input type: checkbox

## Example

Checkboxes let a user select one or more options of a limited number of choices:

<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle" value="Car"> I have a car
Try it yourself »

### Input type: color

## Example

Select a color from a color picker:

Select your favorite color: <input type="color" name="favcolor">
Try it yourself »

### Input type: date

## Example

Define a date control:

Birthday: <input type="date" name="bday">
Try it yourself »

### Input type: datetime

## Example

Define a date and time control (with time zone):

Birthday (date and time): <input type="datetime" name="bdaytime">
Try it yourself »

### Input type: datetime-local

## Example

Define a date and time control (no time zone):

Birthday (date and time): <input type="datetime-local" name="bdaytime">
Try it yourself »

### Input type: email

## Example

Define a field for an e-mail address (will be automatically validated when submitted):

E-mail: <input type="email" name="usremail">
Try it yourself »

Tip: Safari on iPhone recognizes the email type, and changes the on-screen keyboard to match it (adds @ and .com options).

### Input type: file

## Example

Define a file-select field and a "Browse..." button (for file uploads):

Select a file: <input type="file" name="img">
Try it yourself »

### Input type: hidden

## Example

Define a hidden field (not visible to a user).

A hidden field often stores a default value, or can have its value changed by a JavaScript:

<input type="hidden" name="country" value="Norway">
Try it yourself »

### Input type: image

## Example

Define an image as a submit button:

<input type="image" src="img_submit.gif" alt="Submit">
Try it yourself »

### Input type: month

## Example

Define a month and year control (no time zone):

Birthday (month and year): <input type="month" name="bdaymonth">
Try it yourself »

### Input type: number

## Example

Define a field for entering a number (You can also set restrictions on what numbers are accepted):

Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5">
Try it yourself »

Use the following attributes to specify restrictions:

- max - specifies the maximum value allowed
- min - specifies the minimum value allowed
- step - specifies the legal number intervals
- value - Specifies the default value

### Input type: password

## Example

Define a password field (characters are masked)

<input type="password" name="pwd">
Try it yourself »

### Input type: radio

## Example

Radio buttons let a user select only one of a limited number of choices:

<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female
Try it yourself »

### Input type: range

## Example

Define a control for entering a number whose exact value is not important (like a slider control). You can also set restrictions on what numbers are accepted:

<input type="range" name="points" min="0" max="10">
Try it yourself »

Use the following attributes to specify restrictions:

- max - specifies the maximum value allowed
- min - specifies the minimum value allowed
- step - specifies the legal number intervals
- value - Specifies the default value

### Input type: reset

## Example

Define a reset button (resets all form values to default values):

<input type="reset">
Try it yourself »

Tip: Use the reset button carefully! It can be annoying for users who accidentally activate the reset button.

### Input type: search

## Example

Define a search field (like a site search, or Google search):

Search Google: <input type="search" name="googlesearch">
Try it yourself »

### Input type: submit

## Example

Define a submit button:

<input type="submit">
Try it yourself »

### Input type: tel

## Example

Define a field for entering a telephone number:

Telephone: <input type="tel" name="usrtel">
Try it yourself »

### Input type: text

## Example

Define two single-line text fields that a user can enter text into:

First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
Try it yourself »

### Input type: time

## Example

Define a control for entering a time (no time zone):

Select a time: <input type="time" name="usr_time">
Try it yourself »

### Input type: url

## Example

Define a field for entering a URL:

Add your homepage: <input type="url" name="homepage">
Try it yourself »

Tip: Safari on iPhone recognizes the url input type, and changes the on-screen keyboard to match it (adds .com option).

### Input type: week

## Example

Define a week and year control (no time zone):

Select a week: <input type="week" name="week_year">
Try it yourself »

HTML <input> tag

### WEB HOSTING

UK Reseller Hosting

### WEB BUILDING

FREE Website BUILDER Free HTML5 Templates

### W3SCHOOLS EXAMS

HTML, CSS, JavaScript, PHP, jQuery, XML, and ASP Certifications

### SHARE THIS PAGE

### Color Picker

### HTML/CSS

HTML Tutorial HTML5 Tutorial CSS Tutorial CSS3 Tutorial Bootstrap Tutorial

### JavaScript

JavaScript Tutorial jQuery Tutorial jQuery Mobile Tutorial AngularJS Tutorial AJAX Tutorial JSON Tutorial

### Graphics

Canvas Tutorial SVG Tutorial Google Maps Tutorial

### Server Side

SQL Tutorial PHP Tutorial ASP Tutorial ASP.NET Tutorial VBScript Tutorial AppML Tutorial

### Web

Web Building Web Statistics Web Certification

### XML

XML Tutorial DTD Tutorial Schema Tutorial XML DOM Tutorial XPath Tutorial XSLT Tutorial XQuery Tutorial XSL-FO Tutorial RSS Tutorial WSDL Tutorial

### HTML/CSS

HTML Tag Reference HTML Event Reference HTML Color Reference CSS 1,2,3 Reference Bootstrap Reference

### JavaScript

JavaScript Reference HTML DOM Reference jQuery Reference jQuery Mobile Reference Google Maps Reference

### Server Side

PHP Reference SQL Reference ASP Reference VBScript Reference Razor Reference ASP.NET Reference

### XML

XML DOM Reference XSLT Reference XSL-FO Reference XPath Reference XQuery Reference Schema Reference RSS Reference SVG Reference

### HTML Charsets

HTML Character Sets HTML ASCII HTML ANSI HTML Windows-1252 HTML ISO-8859-1 HTML Symbols HTML UTF-8

### HTML/CSS

HTML Examples CSS Examples

### Browser Scripting

JavaScript Examples HTML DOM Examples jQuery Examples jQuery Mobile Examples AngularJS Examples AJAX Examples

### Server Scripting

PHP Examples ASP Examples VBScript Examples Razor Examples .NET Examples

### XML Languages

XML Examples DTD Examples XML DOM Examples XSL Examples XSLT Examples XPath Examples XQuery Examples Schema Examples RSS Examples SVG Examples